<template>
  <div style="width: 100%; height: 100%;">
    <div id="map" class="map" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';

import Tianditu from "@/lang/tianditu";

/**
 * 使用 4490 坐标系
 *
 * 接入天地图
 */
export default {
    name: 'OpenLayersMap',
    components: {},
    data() {
        return {
            map: null
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            // 地图
            let vec_c = new TileLayer({
                source: Tianditu.createWMTS({
                    url: `http://t0.tianditu.gov.cn/vec_c/wmts?tk=a21e63600f57ca2077aef9f81f18457d`,
                    layer: "vec",
                    matrixSet: "c"
                })
            })

            // 影像
            let img_c = new TileLayer({
                source: Tianditu.createWMTS({
                    url: `http://t0.tianditu.gov.cn/img_c/wmts?tk=a21e63600f57ca2077aef9f81f18457d`,
                    layer: "img",
                    matrixSet: "c"
                })
            })

            // 道路标记
            let cia_c = new TileLayer({
                source: Tianditu.createWMTS({
                    url: `http://t0.tianditu.gov.cn/cia_c/wmts?tk=a21e63600f57ca2077aef9f81f18457d`,
                    layer: "cia",
                    matrixSet: "c"
                })
            })

            let xyz = new TileLayer({
                source: Tianditu.createXYZ({
                    url: "http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=a21e63600f57ca2077aef9f81f18457d",
                    wrapX: false
                })
            })

            let map = new Map({
                view: new View({
                    center: [108.2184375, 30.91717870],
                    zoom: 7,
                    projection: Tianditu.getProjection()
                }),
                layers: [vec_c, img_c, cia_c],
                target: 'map',
            });

            vec_c.setVisible(false);
            // img_c.setVisible(false);
            // cia_c.setVisible(false);

            map.on('click', function (evt) {
                let coordinate = evt.coordinate;
                console.log('click: ' + coordinate);

                map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
                    Layers.succeed('功能建设中！');
                });
            });

            this.map = map;
        }

    },
};
</script>

<style>
.map {
    width: 100%;
    height: 400px;
}
</style>